<template>
    <div class="navbar">

        <span>
            <img alt="" src="@/assets/img/img_4.png">
        </span>
        <div class="box">

            <div>
                <i class="iconfont icon-fangdajing " style="font-size: 24px;" @click="hideMenu"></i>
            </div>
            <div>
                <i class="iconfont icon-gouwuche" style="font-size: 24px;"></i>
            </div>
            <div>
                <i class="iconfont icon-xuanxiang-heng" style="font-size: 24px;" @click="click"></i>
            </div>
            <Dialog v-show="isDialogVisible" class="dialog">
                <template #header>
                    <div style="display: flex;justify-content: space-around">
                        <i class="iconfont icon-youhuiquan"></i>
                        <h1>优惠券</h1>
                    </div>
                </template>
                <!--                <div >-->
                <div style="display: flex;justify-content: space-around">
                    <i class="iconfont icon-wodedingdan"></i>
                    <h1>我的订单</h1>
                    <!--                    </div>-->
                </div>
                <template #footer>
                    <div style="display: flex;justify-content: space-around;">
                        <i class="iconfont icon-kefu"></i>
                        <h1>商城客服</h1>
                    </div>
                </template>
            </Dialog>
        </div>
    </div>
</template>

<script setup>
import {defineEmits, defineProps, ref} from "vue";
import Dialog from "@/components/Dialog/Dialog.vue";

const isDialogVisible = ref(false)
const props = defineProps({
    isShowMenu: {
        type: Boolean,
        required: true,
    },
});
const change = () => {
    props.isShowMenu = !props.isShowMenu
}
const emits = defineEmits(['hidden'])
const hideMenu = () => {
    emits('hidden', true);
}
const click = () => {
    isDialogVisible.value = !isDialogVisible.value
}
</script>

<style lang="scss" scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  background-color: white;

  span {
    img {
      width: 40px;
      height: 40px;
      padding-left: 20px;
    }
  }

  .box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100px;
    height: 40px;
  }
}

.dialog {
  display: flex;
  flex-direction: column;
  background-color: white;
  justify-content: space-around;
  position: absolute;
  top: 45px;
  left: 270px;
  width: 100px;
  height: 200px;
  /* 添加以下样式来创建箭头 */
  &::before {
    content: ""; /* 创建一个空内容 */
    position: absolute; /* 绝对定位 */
    top: -20px; /* 调整箭头的位置 */
    left: 80%; /* 水平居中 */
    margin-left: -10px; /* 调整箭头的水平位置 */
    border-width: 15px; /* 箭头的大小 */
    border-style: solid; /* 箭头的样式 */
    border-color: white; /* 箭头的颜色 */
  }

}

</style>